<template>
  <div class="flowContain">
    <div class="topBackContent">
      <div class="addTxt">信息</div>
    </div>
    <div class="topSelectBox">
      <el-button type="primary" @click="addWarnCase">新增</el-button>
    </div>
    <div class="elTableBox">
      <div class="elTable" >
        <el-table
          height="100%"
          ref="refsTable"
          border
          :data="tableData"
          style="width: 100%;">
          <el-table-column
            v-for="item in columns"
            :key="item.key"
            :row-key="item.key"
            :label="item.label"
            :align="item.align"
            :prop="item.key"
          >
            <template slot-scope="scope">
              <!-- 宾客类型，1-散客；2-会员；3-OTA；4-协议公司；5-团队,可用值:1,2,3,4,5 -->
              <span v-if="item.key == 'rules'">
                <div>条件1：若出租率小于30%。</div>
                <div>条件2：若出租率大于60%。</div>
                {{scope.row[item.key]}}
              </span>
              <span v-else>{{scope.row[item.key]}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            align="center"
            width="188">
            <template slot-scope="{row}">
              <el-button type="text" size="small" @click="openClose(row,1)">启用</el-button>
                <el-button type="text" size="small" style="color: #D9001B!important;" @click="openClose(row,2)">删除</el-button>
                <el-button type="text" size="small" style="color: #D9001B!important;" @click="openClose(row,3)">停用</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formData.currentPage"
        :page-sizes="[10, 20, 30, 50,100]"
        :page-size="formData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "blacklistManage",
  components:{
  },
  data() {
    return {
      tableData:[{},{}],
      columns: [
        { key: 'storeName', label: `酒店名称`, },
        { key: 'caseName', label: `方案名称`},
        { key: 'roomType', label: `房型`, },
        { key: 'monitorDays', label: `监控营业日`, },
        { key: 'triggerCondition', label: `触发条件`,},
        { key: 'rules', label: `规则`,},
        { key: 'status', label: `状态`,},
        { key: 'operateTime', label: `操作时间`,align:'center', },
        { key: 'operator', label: `操作人`,align:'center',},
      ],
      total:0,
      formData: {
        currentPage: 1,
        pageSize:10,
      },

    }
  },
  mounted() {
  },
  created(){
    // this.getInit()
  },
  methods: {
    addWarnCase(){

    },
    getInit(){
      this.formData.currentPage = 1
      this.tableData = []
      this.getAppPages()
    },
    async getAppPages(){
      let params = {
        size:this.formData.pageSize,
        current:this.formData.currentPage,
      }
      const {records,total} = await this.$http.HomeService.blacklistPage(params)
      console.log('列表',records,total)
      this.total = total
      this.tableData = records
    },
    async openClose(row,type){
      console.log('row,type',row,type)


      // this.$confirm('是否确认解除黑名单？', '提示', {
      //   confirmButtonText: '确认',
      //   cancelButtonText: '取消',
      //   center: true,
      //   customClass:'customClassStyle'
      // }).then(async (res)=>{

      // }).catch(()=>{})
    },
    // 分页
    handleSizeChange(val) {
      this.formData.pageSize = val
      this.getAppPages()
    },
    // 当前页
    handleCurrentChange(val) {
      this.formData.currentPage = val
      this.getAppPages()
    },
  }
}
</script>
<style lang="less" scoped>
.flowContain{
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  border-radius: 2px;
  // padding: 20px;
  box-sizing: border-box;
  background: #FFFFFF;
  .topBackContent{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0px 20px;
    border-bottom: 2px solid #EEEEEE;
    height: 42px;
    box-sizing: border-box;
    .addTxt{
      color: rgb(40, 126, 255);
      font-family: "Microsoft YaHei";
      font-size: 14px;
      font-weight: 700;
      background: linear-gradient(to right,#287EFF,#287EFF) no-repeat center bottom;
      background-size: 56px 2px;
      padding: 14px 0px 10px;
    }
  }
  .elTableBox{
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0px 20px 20px;
    overflow: auto;
    .elTable{
      flex: 1;
      position: relative;
      margin-bottom: 0px;
      cursor: pointer;
      ::v-deep .el-table{
        position: absolute;
        border-radius: 6px;
        color: #555555;
        margin-top: 0px;
      }

      /**表格头部字体样式 */
      ::v-deep .el-table thead th.el-table__cell{
        background: #FBFCFD;
        white-space: nowrap;
        font-family: "Microsoft YaHei";
        font-weight: bold;
        font-size: 14px;
        color: #333333;
        line-height: 16px;
      }
      /**表格内字体样式 */
      ::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell{
        font-family: "Microsoft YaHei";
        font-weight: 400;
        font-size: 14px;
        color: #555555;
        line-height: 16px;
      }
      ::v-deep .el-button--small{
        padding: 0px 5px;
        font-size: 14px;
        color: #287eff;
        font-family: "Microsoft YaHei";
        font-weight: 400;
        line-height: normal;
      }

    }
  }
}

// /* 顶部筛选条件样式 */ 
.topSelectBox{
  padding: 20px;
  .el-button--primary{
    background: #287EFF;
    font-family: "Microsoft YaHei";
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;
  }
  .is-plain{
    border: 1px solid #287EFF;
    font-family: "Microsoft YaHei";
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    color: #287EFF;
  }
  .el-button{
    border-radius: 2px;
    margin-right: 20px!important;
    margin-left: 0px;
  }
}


</style>
<style lang="less">
/**弹框提示样式 */ 
.customClassStyle {
  padding-bottom: 0px!important;
  .el-button{
    width: 88px;
    height: 40px;
    padding: 0;
    line-height: 40px;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    border: 1px solid #287EFF;
  }
  .el-button--primary{
    margin-left: 20px!important;
    background: #287EFF;
    color: #FFFFFF;
  }
  .el-message-box__message{
    margin-bottom: 20px;
  }
  .el-message-box__title{
    color: #333333;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    justify-content: flex-start!important;
  }
  .el-message-box__header{
    padding: 14px 26px 14px 14px;
  }
  .el-button--primary:focus{
    background: #287EFF;
    border-color:#287EFF;
  }
  .el-button--primary:hover{
    background: #287EFF;
    border-color:#287EFF;
  }
  .el-message-box__btns{
    text-align: right;
    padding: 20px 30px 30px;
  }
}
</style>
